import React, { useEffect, useState } from 'react'
import { getProDetail } from './../../api/detail'
import { Button, InputItem } from 'antd-mobile'
import { useParams } from 'react-router-dom'
function Detail(props) {
  console.log(props)
  // const proid = props.match.params.proid
  // const { match: { params: { proid }}} = props
  const { proid } = useParams()
  // 设置初试状态proname的只为 '',修改proname的函数为setProname
  const [ proname, setProname ] = useState('')
  // useEffect(() => {}, []) ===> componentDidMount
  useEffect(() => {
    getProDetail(proid).then(res => {
      console.log(res.data.data)
      setProname(res.data.data.proname) // 1
    })
  }, [])
  return (
    <div className="box">
      <header className="header">Detail 头部</header>
      <div className="content">
        Detail 内容 - { proname }
        <Button type="primary">primary</Button>
        <InputItem
            placeholder="start from right"
            clear
            onChange={(v) => { console.log('onChange', v); }}
            onBlur={(v) => { console.log('onBlur', v); }}
          >光标在右</InputItem>
      </div>
    </div>
  )
}

export default Detail
